<template>
    <div style="position: relative;">
        <Spin v-if="loading" fix></Spin>
        <lock-setting v-model="form" :isShowLock="true"></lock-setting>
        <div style="margin-bottom:40px;padding-left:120px">
            <i-button :loading="submiting" @click="handleSubmit">保存修改</i-button>
        </div>
        <h2 class="margin-bottom-20 border-bottom" style="padding-bottom:20px">
            门店自定义列表
            <i-button @click="initData">刷新</i-button>
        </h2>
        <Table :loading="loadingTable" :data="tableData" :columns="columns"></Table>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
import pick from 'lodash/pick'
import util from '@/libs/util'
import { http, api } from '@/libs/http'
import lockSetting from '../components/lock-setting'

export default {
      name: 'lock-company-setting',
      components: {
        lockSetting
      },
      computed: {
        ...mapState({
          clientId: state => state.user.clientId
        })
      },
      data () {
        return {
          loading: false,
          loadingTable: false,
          submiting: false,
          tableData: [],
          form: {
            enable_alarm: false,
            alarm_time: '',
            alarm_unlock: 10,
            forbid_add_password: false,
            forbid_add_tmp_password: false
            // low_power: ''
          },
          columns: [
            { title: '门店名称', key: 'name' },
            { title: '开启预警', key: 'enableAlarm' },
            { title: '预警时长', key: 'alarmTime' },
            { title: '超时未锁', key: 'alarmUnlock' }
          ]
        }
      },
      async created () {
        await this.waitForId()
        this.initData()
        this.initSetting()
      },
      methods: {
        waitForId () {
          return new Promise(resolve => {
            let timer = setInterval(() => {
              if (this.clientId) {
                clearInterval(timer)
                timer = null
                resolve()
              }
            }, 500)
          })
        },
        async initData () {
          this.loadingTable = true
          try {
            const res = await http.req(api.lock_settubg_list, null, { type: 'client', value: this.clientId })
            if (!res) return
            this.tableData = res.map(item => {
              const { enable_alarm, alarm_time, alarm_unlock } = item.lock_alarm_setting
              return {
                name: item.name,
                enableAlarm: enable_alarm === null ? '-' : enable_alarm ? '是' : '否',
                alarmTime: alarm_time === null ? '-' : alarm_time + '小时',
                alarmUnlock: alarm_unlock === null ? '-' : alarm_unlock + '分钟'
              }
            })
          } catch (err) {
            console.log(err)
          } finally {
            this.loadingTable = false
          }
        },
        async initSetting () {
          this.loading = true
          try {
            const res = await http.req(api.lock_setting, null, { type: 'client', value: this.clientId })
            if (!res) return
            const result = util.lockSettingTranslate(res)
            this.form = pick(result, Object.keys(this.form))
          } catch (err) {
            console.log(err)
          } finally {
            this.loading = false
          }
        },
        async handleSubmit () {
          // console.log('form', this.form);
          this.submiting = true
          try {
            const data = {
              ...this.form,
              value: this.clientId,
              alarm_unlock: 10,
              type: 'client',
              model: 'self'
            }
            const res = await http.req(api.lock_setting_update, null, data)
            if (res) {
              this.$Message.success({
                content: '更改成功，相应提醒仅在配置完成后生效',
                duration: 4
              })
            }
          } catch (err) {
            console.log(err)
          } finally {
            this.submiting = false
          }
        }
      }
    }
</script>